<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Listen Dom Mutations</title>
  </head>
  <body>
    <button onclick="handleAddElement()">add element</button>
    <div id="content"></div>
    <script>
      const content = document.getElementById("left-result-container");

      //   function handleAddElement() {
      //     const helloText = `<h1>Hello</h1>`;
      //     content.innerHTML = helloText;
      //   }

      const config = { attributes: false, childList: true, subtree: false };

      function handleStyled(targetElement, widthPercent) {
        targetElement.style["border-radius"] = "10px";
        targetElement.style["box-shadow"] = "2px 2px 10px #ccc";
        targetElement.style["overflow"] = "hidden";
        if (widthPercent) targetElement.style["width"] = widthPercent + "%";
      }

      // 当观察到突变时执行的回调函数
      const callback = function (mutationsList) {
        const targetElement = mutationsList[0].target.children[0];
        console.log(targetElement);
        if (targetElement && targetElement.nodeName) {
          handleStyled(targetElement);
        }
        // mutationsList.forEach(function (item, index) {
        //   if (content.children.length) {
        //     const resultBox = content.children[0];
        //     if (!content.children[0].style.boxShadow) {
        //       handleStyled(resultBox);
        //     }
        //   }
        // });
      };

      // 创建一个链接到回调函数的观察者实例
      const observer = new MutationObserver(callback);

      // 开始观察已配置突变的目标节点
      observer.observe(content, config);
    </script>
  </body>
</html>
